<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 添加经纪和搜索关键字 -->
      <el-row type="flex" justify="space-between" style="magin-bottom='20px'">
        <el-col>
          <el-button class="el-dropdown-link" type="primary" size="small" @click="isShowBtn">添加经纪</el-button>
        </el-col>
        <el-col class="myInput">
          <el-dropdown disabled="true" placement="bottom-start" trigger="click" @command="ChangeValue" @click.native="isShowDropdown">
            <el-input ref="seachInput" v-model.trim="name_contains" style="width:600px" type="" size="small" placeholder="请输入关键字" class="input-with-select"> <el-button slot="append" type="small" icon="el-icon-search" @click="searchAgents" /></el-input>
            <el-dropdown-menu v-show="isDropdown" slot="dropdown">
              <el-dropdown-item v-if="myHistory.length===0" disabled>没有历史记录</el-dropdown-item>
              <el-dropdown-item v-for="item,index in myHistory" :key="index" :command="item">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <!--经纪表格-->
      <el-table :data="formData" border>
        <el-table-column label="图片" align="center">
          <template v-slot="{row}">
            <img :src="row.image" alt="我是头像" class="img">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="name" />
        <el-table-column label="邮箱" prop="email" />
        <el-table-column label="电话" prop="phone" />
        <el-table-column label="地址" prop="address" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="操作">
          <template v-slot="{row}" class="btn">
            <el-button type="primary" size="small" @click="editAgents(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delAgents(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :page-size="5"
          :current-page="currentPage"
          layout="prev, pager, next"
          :total="total"
          @prev-click="prevClick"
          @next-click="nextClick"
          @current-change="currentChange"
        />
      </div>
    </el-card>
    <myDialog v-if="isShow" ref="myDialog" :is-show.sync="isShow" :get-agents-list="getAgentsList" :get-agents-num="getAgentsNum" />
  </div>
</template>

<script>
// 引入接口函数
import { getAgentsList, getAgentsNum, delAgents, editAgents } from '@/api/agents'
// 引入组件
import myDialog from './componet/dialog.vue'
export default {
  components: {
    myDialog
  },
  data() {
    return {
      formData: [],
      page: {
        _limit: 5, // 查询多少条
        _start: 0, // 多少条开始
        name_contains: null// 查询的名字
      },
      total: 0, // 多少条数据
      currentPage: 1, // 当前页
      isShow: false, // 控制模态框显示隐藏
      name_contains: null,
      isDropdown: true, // 控制搜索显示
      myHistory: JSON.parse(localStorage.getItem('myHistory')) || []// 历史记录
    }
  },
  async created() {
    // 获取经纪列表
    await this.getAgentsList()
    // 获取经纪数
    await this.getAgentsNum()
  },
  methods: {
    // 获取经纪列表
    async getAgentsList() {
      const res = await getAgentsList(this.page)
      this.formData = res
      console.log(res)
    },
    // 获取经纪数量
    async getAgentsNum() {
      const res = await getAgentsNum({ name_contains: this.page.name_contains })
      this.total = res
      console.log(res)
    },
    // 上一页
    prevClick() {
      this.page._start -= 5
      this.getAgentsList()
    },
    // 下一页
    nextClick() {
      this.page._start += 5
      this.getAgentsList()
    },
    // 点击获取当前页
    currentChange(val) {
      this.page._start = 5 * (val - 1)
      this.getAgentsList()
    },
    // 点击弹出模态框
    isShowBtn() {
      this.isShow = true
    },
    // 点击删除经纪人
    async delAgents(id) {
      try {
        const res = await this.$confirm('确定要删除当前经纪人吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        console.log(res)
        // 根据id删除
        await delAgents(id)
        // 获取经纪列表
        await this.getAgentsList()
        // 获取经纪数
        await this.getAgentsNum()
        this.$message.success('删除成功!')
      } catch {
        this.$message.warning('取消删除成功!')
      }
    },
    // 编辑回显
    async editAgents(id) {
      this.isShow = true
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      try {
        const res = await editAgents(id)
        console.log(res)
        this.$refs.myDialog.agentsForm = res
        loading.close()
      } catch {
        this.$message.error('编辑获取数据失败!')
        loading.close()
        this.isShow = false
      }
    },
    // 点击搜索经纪
    async  searchAgents() {
      this.page.name_contains = this.name_contains
      const flag = this.myHistory.includes(this.name_contains)
      if (this.name_contains && !flag) {
        this.myHistory.push(this.name_contains)
      }
      localStorage.setItem('myHistory', JSON.stringify(this.myHistory))
      // 获取经纪列表
      await this.getAgentsList()
      // 获取经纪数
      await this.getAgentsNum()
    },
    // 判断是否隐藏
    isShowDropdown(e) {
      const flag = e.target.classList.contains('el-input__inner')
      console.log(flag)
      if (flag) {
        this.isDropdown = true
      } else {
        this.isDropdown = false
      }
    },
    // 给输入框赋值历史记录
    async  ChangeValue(val) {
      this.name_contains = this.page.name_contains = val
      // 获取经纪列表
      await this.getAgentsList()
      // 获取经纪数
      await this.getAgentsNum()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 10px;
  padding-bottom: 100px;
  .img{
    width: 100px;
    height: 100px;
    object-fit: cover;
  }
  .btn{
    display: flex;
    justify-content: space-around;
    align-items:center;
  }
  .pagination{
    display: flex;
    justify-content: center;
  }
}
.el-table{
  margin-top:20px ;
}
::v-deep .el-dropdown-menu{
  left: 740px !important
}
.myInput{
display: flex;
justify-content: end;
}
</style>

